<template>
    <div class="cinema">
        <my-head title="影院" :back="false">
            <template #left v-if="city" >
                <span @click="gotowhere('city')">
                    {{city.name }}
                    <van-icon name="arrow-down" size="16" />
                </span>
            </template>
        </my-head>
        <van-dropdown-menu>
            <van-dropdown-item :title="area" ref="item">
                <van-grid>
                    <van-grid-item :class="index==i?'active':'' " @click="choosearea(l,i)" v-for="(l,i) in areas" :key='i' :text="l.name" />
                </van-grid>
             </van-dropdown-item>
            <van-dropdown-item v-model="value" :options="options" />
        </van-dropdown-menu>
        <div>
            <clist :list="list"></clist>
        </div>

    </div>
</template>


<script>
export default {
    data(){
        return { 
            value:0,   // 排序的值 
            options: [
                { text: '默认排序', value: 0 },
                { text: '价格升序', value: 1 },
                { text: '价格降序', value: 2 },
            ],
            list:[], // 取值 第一次取值 
            area:'全城',
            index:0,
        }
    },
    watch:{
        value(v){
            console.log(v)
            if(v==0){
                this.list = [...this.cinemaList ];
            }else if(v==1){
                // 升序
                this.list.sort(this.listAsc)
            }else if(v==2){
                // 降序 
                this.list.sort(this.listDesc)
            }
        }
    },
    methods:{
        // 根据区来切换电影院 
        choosearea(l,i){
            this.$refs.item.toggle();  // 开关
            this.area = l.name;
            if(i==0){
                this.list = [...this.cinemaList ];
            }else{
                this.list  = this.cinemaList.filter(item=>item.districtName==l.name )
            }
        },
        // 升序
        listAsc(a,b){
            // return a[filed] - b[filed]
            return a['lowPrice'] - b['lowPrice']
        },
        // 降序
        listDesc(a,b){
            return b['lowPrice'] - a['lowPrice']
        },

    },
    computed:{  // getters 
        areas(){  // 求出多少个区
            var arr = [{
                name:"全城"
            }]
            var obj = {}
            console.log('arsssss')
            // 数组去重  
            for(var i=0;i<this.cinemaList.length;i++){
                var item = this.cinemaList[i]
                if(!obj[item.districtName]){   //  obj.江岸区 = '江岸区'
                    obj[item.districtName] = item.districtName;
                    arr.push(item.district);
                }
            }
            console.log(arr)
            return arr;
        }
    },
    mounted(){
        if(this.city){
            // 请求当前城市的电影数据 
            this.getCinemaList({
                cityId:this.city.cityId,
                callback:list=>{
                    this.list = list ;
                }
            })

        }else{
            this.$dialog.alert({
                title: '选择城市',
                message: '请去定位选择你的所在城市',
            }).then(() => {
            // on close
                this.$router.push({name:'city'})
            });
        }
    }
}
</script>


<style lang="scss" >
.cinema{
    padding-bottom: 56px;
    .active{
        color:#ff5f16;
        border:#ff5f16;
        ::v-deep .van-grid-item__content{
            border:#ff5f16;
        }
    }
}
</style>